$(function () {
    class Swiper {
        constructor(settings = {}) {
            this.$settings = Object.assign({ auto: true, time: 500, speed: 3000 }, settings);
            this.$el = $(this.$settings.el);
            // console.log(this.$el);
            this.$oUlLis = this.$el.children('ul').children('li');
            this.$oOl = this.$el.children('ol');
            this.$prevBtn = this.$el.children('.arr').find('.change-button-left');
            this.$nextBtn = this.$el.children('.arr').find('.change-button-right');
            this.$bgColor = ["#9fdeff", "#e7b1ff", "#9fdeff", "#ffaca8", "#f9c6d5", "#9fdeff"];
            this.$imgIndex = 0;
            this.$timer = 0;
            this.$time = this.$settings.time;
            this.$speed = this.$settings.speed;
            this.init();
            this.autoPlay();
            this.mouseHandler();
            this.$clickFlag = true;
            this.clickHandler();
        }
        init() {
            // 根据图片动态创建指示器
            this.$oUlLis.each(index => {
                this.$oOl.append($(`<li data-index='${index}'></li>`).addClass((index == 0) ? 'active' : ''));
            })
            this.play();
        }
        play() {
            this.$oUlLis.each((index) => {
                this.$oUlLis.eq(index).animate({ opacity: (this.$imgIndex == index) ? 1 : 0 }, this.$time, () => {
                    this.$clickFlag = true;
                });
            })
            this.$oOl.children('li').eq(this.$imgIndex).addClass('active').siblings().removeClass('active');
            if (this.$el.parents('.banner')) {
                this.$el.parents('.banner').animate({ backgroundColor: this.$bgColor[this.$imgIndex] }, this.$time);
            }
        }
        autoPlay() {
            if (!this.$settings.auto) {
                return;
            }
            this.$timer = setInterval(() => {
                this.$imgIndex++;
                if (this.$imgIndex > this.$oUlLis.length - 1) {
                    this.$imgIndex = 0;
                }
                this.play();
            }, this.$speed);
        }
        mouseHandler() {
            this.$el.hover(() => {
                clearInterval(this.$timer);
            }, () => {
                this.autoPlay();
            })
            this.$oOl.on("mouseover", "li", e => {
                let index = $(e.target).data('index');
                this.$imgIndex = index;
                this.play();
            })
        }
        clickHandler() {
            this.$prevBtn.on('click', () => {
                if (!this.$clickFlag) {
                    return;
                }
                this.$clickFlag = false;
                this.$imgIndex--;
                if (this.$imgIndex < 0) {
                    this.$imgIndex = this.$oUlLis.length - 1;
                }
                this.play();
            })
            this.$nextBtn.on('click', () => {
                if (!this.$clickFlag) {
                    return;
                }
                this.$clickFlag = false;
                this.$imgIndex++;
                if (this.$imgIndex > this.$oUlLis.length - 1) {
                    this.$imgIndex = 0;
                }
                this.play();
            })
        }
    }
    new Swiper({el:'.main-board-content .swiper'})
})